/* ---------------------------------------------------------------------
Global JavaScript & jQuery
------------------------------------------------------------------------ */

var BLAM = BLAM || {};

(function($) {

    $(function() {

        // Initialize!
        BLAM.JsFriendly.init();
        BLAM.ExternalLinks.init();
        BLAM.SlidingPanels.init({
            $panelsWrap: $('.js-panels-wrap')
        });
    });

}(jQuery));

/* ---------------------------------------------------------------------
JsFriendly

Remove .no-js hook
------------------------------------------------------------------------ */
BLAM.JsFriendly = {
    init: function() {
        $('html').removeClass('no-js');
    }
};

/* ---------------------------------------------------------------------
ExternalLinks

Launches links with a rel="external" in a new window
------------------------------------------------------------------------ */

BLAM.ExternalLinks = {
    init: function() {
        $('a[rel=external]').on('click', function(e) {
            window.open($(this).attr('href'));
            e.preventDefault();
        });
    }
};

/* ---------------------------------------------------------------------
SlidingPanels

Launches slideable, reconfigurable panels 
------------------------------------------------------------------------ */

BLAM.SlidingPanels = {

    _default: {

         $panelsWrap: null

    },

    init: function(options) {

        this.options = $.extend(this._default, options);
        this.$panelsWrap = this.options.$panelsWrap;

        this.bind();

    },

    bind: function() {

        var self = this;
        
        // Hide all panel content by default
        $('.js-panel-content').css('opacity','0');

        // Expand panel on click
        $('[data-panel-target]').on('click', function(e) {

            // FOR TESTING: If animation test button clicked... 
            if ( $(this).parent().data('animate') ) {
                
                // Store option
                var targetPanel = $(this).parent();

                closePanel();
                openPanel(targetPanel); 

            }

            // Else assign a variable normally
            else {

                // Store target panel name
                var targetPanel = $(this).attr('id');

                // If a panel is open and the target panel is not disabled ...
                if ( $('.panel-expand').length && !$('#'+targetPanel).hasClass('panel-disabled') ) { 

                    closePanel();
                    openPanel(targetPanel);

                }
                // If no panels are open
                else if ( !$('.panel-expand').length ) {

                    openPanel(targetPanel);

                }

            }           

            e.preventDefault();

        });

        // Close panel via close icon
        $('.js-panel-close').on('click', function(e) {

            closePanel();

            e.preventDefault();

        }); // END close

        function openPanel(targetPanel) {

            // FOR TESTING: 
            if ( $(targetPanel).data('animate') ) {

                // Store the button
                var optionId = $(targetPanel).find('input').data('panel-target');
                // Store fake clicked panel
                var targetPanel = 'panel-6';

            }

            // Store target panel id
            var panelId = $('#' + targetPanel);

            // Store target panel content
            var panelContent = $(panelId).find('.js-panel-content');

            // Create new panel module
            var panelMod = '<div class="mod-panel panel-hide panel-expand"></div>';

            // Store the parent row
            var parentRow = $(panelId).parent().attr('id');
            var targetRow = '#' + parentRow;

            // Choose placement for expanded panel module
            // Panel can be placed either before or after its origin row
            if ( $(targetRow).data('row') === 'suffix' ) {
                
                // Place panel module after row
                $(targetRow).after(panelMod);

            }

            else {
                
                // Place panel module before row
                $(targetRow).before(panelMod);

            }

            // Add hidden panel content to module
            $(panelContent)
                // Clone the panel content, set events to true
                .clone(true)
                // Append clone to new panel module
                .appendTo('.panel-expand')
                // Find panel module
                .parent()
                // Add its panel class
                .addClass(targetPanel);

            // Store height
            var autoHeight = $('.panel-expand').height()+100;

            // Store row objects
            var rowsBefore = self.$panelsWrap.find('.panel-expand').prevAll('[data-row]');
            var rowsAfter = self.$panelsWrap.find('.panel-expand').nextAll('[data-row]');
            var oddPanels = self.$panelsWrap.find('.mod-panel:not(.panel-expand):nth-child(odd)');
            var evenPanels = self.$panelsWrap.find('.mod-panel:not(.panel-expand):nth-child(even)');

            // Animation the rows ...
            animationOptions();

            // Then animate the panel ...
            $('.panel-expand')
                // Set height to zero
                .css('height','0')
                .removeClass('panel-hide')
                // Slide open panel
                .animate({

                    'height': autoHeight,
                    'opacity': '1'

                }, 500, function() {

                    // Scroll to the expanded panel
                    $('html, body')
                        .animate({
                            // Reposision to just above expanded panel top 
                            scrollTop: $('.panel-expand').position().top+-50
                        }, 800 );

                    // Fade in panel content
                    $(this)
                        .find('.js-panel-content')
                        .animate({ opacity: 1 });

                    // Disable original panel
                    $(panelId)
                        .addClass('panel-disabled')
                        .animate({ 
                            'opacity': '0.5',
                        });

                    // Reset panel positioning
                    $(oddPanels)
                        .animate({
                            'top': '0'
                        });

                    $(evenPanels)
                        .animate({
                            'top': '0'
                        });

                });

            function animationOptions() {

                // FOR TESTING: Animation Options
                // Option #1: Basic slide
                if ( optionId === 'option1' ) {
            
                }

                // Option #2: Row slide
                if ( optionId === 'option2' ) {

                    //Animate the rows
                    $(rowsBefore)
                        .animate({
                            'top': '-100px'
                        }), 1000, 'linear';

                    $(rowsAfter)
                        .animate({
                            'top': '100px'
                        }), 1000, 'linear';

                }

                // Option #3: Row and panel slide
                if ( optionId === 'option3' ) {

                    //Animate the rows
                    $(rowsBefore)
                        .animate({
                            'top': '-100px'
                        }), 1000, 'linear';

                    $(rowsAfter)
                        .animate({
                            'top': '100px'
                        }), 1000, 'linear';

                    $(oddPanels)
                        .animate({
                            'top': '-50px'
                        }), 1000, 'linear';

                    $(evenPanels)
                        .animate({
                            'top': '50px'
                        }), 1000, 'linear';

                }

                // Option #4: Ease bounce
                if ( optionId === 'option4' ) {

                    $(rowsBefore)
                        .animate(
                            { 'top': '-100px' }, {
                                duration: 'slow',
                                easing: 'easeOutBack'
                            })
                        .animate(
                            { 'top': '0' }, {
                                duration: 'slow',
                                easing: 'easeOutBack'
                            });

                    $(rowsAfter)
                        .animate(
                            { 'top': '100px' }, {
                                duration: 'slow',
                                easing: 'easeOutBack'
                            })
                        .animate(
                            { 'top': '0' }, {
                                duration: 'slow',
                                easing: 'easeOutBack'
                            });

                }

                // Option #5: Swing
                if ( optionId === 'option5' ) {

                    $(rowsBefore)
                        .animate(
                            { 'top': '-100px' }, {
                                duration: 'slow',
                                easing: 'jswing'
                            })
                        .animate(
                            { 'top': '0' }, {
                                duration: 'slow',
                                easing: 'easeOutBounce'
                            });

                    $(rowsAfter)
                        .animate(
                            { 'top': '100px' }, {
                                duration: 'slow',
                                easing: 'jswing'
                            })
                        .animate(
                            { 'top': '0' }, {
                                duration: 'slow',
                                easing: 'easeOutBounce'
                            });

                }

            } // END animationOptions

        } // END openPanel

        function closePanel() {

            $('.panel-expand')
                // Slide close panel
                .animate({ 

                    'height': '0',
                    'opacity': '0', 
                    'padding': '0'

                }, 500, function() {

                    // Remove expanded panel mod from dom
                    $(this).remove();

                    // Reset row positioning
                    $('[data-row]').animate({ 'top': '0' });

                    // Reposition user at top
                    $('html, body')
                        .animate({
                            scrollTop: $('.js-panels-wrap').position().top
                        }, 500 );

                    // Enable original panel
                    $('.panel-disabled').animate({ 'opacity': '1' });

                });


        } // END closePanel
       
    } // END bind

};








